<%--<%@ page import="zqdb.O_INFO" %>--%>
<%--<%@ page import="zqdb.T_TWO" %>--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>消费类别</title>

    <style>
        .fail .layui-layer-content {
            background-color: brown;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }

        .succeed .layui-layer-content {
            background-color: #0061A8;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <nav class="breadcrumb" v-cloak>
        <i class="Hui-iconfont">&#xe67f;</i>首页
        <span class="c-gray en">&gt;</span> {{oneTitle}}
        <span class="c-gray en">&gt;</span> {{towTitle}}

    </nav>
    <div class="page-container">
        <span style="color: brown; font-size: 18px;">密码中必须包含：大写字母、小写字母、数字； 且长度不少于8位！</span>
        <table style="table-layout:fixed; width: 100%; word-break:break-all;" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="tablelist">
            <thead>
            <tr class="text-c" style="height:0px;">
                <th style="width: 160px">当前密码</th>
                <th style="width: 160px">修改密码</th>
                <th style="width: 160px">确认密码</th>
                <th style="width: 160px">操作</th>
            </tr>

            </thead>
            <tbody id="datalist">
            <tr class='text-c'>
                <td>
                    <input type="password" class="input-text" style="border:0;" v-model="curpass" maxlength="50" autocomplete="off">
                </td>
                <td>
                    <input type="password" class="input-text" style="border:0;" v-model="newpass" maxlength="50" autocomplete="off">
                </td>
                <td>
                    <input type="password" class="input-text" style="border:0;" v-model="cofpass" maxlength="50" autocomplete="off">
                </td>
                <td class='td-manage'>
                    <input class="btn btn-secondary-outline radius" type="button" value="修改" @click="fAdd">
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/axios.min.js"></script>
<script type="text/javascript" src="./static/vue"></script>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            oneTitle: '系统管理',
            towTitle: '操作员密码修改',
            curpass: '',
            newpass: '',
            cofpass: '',
        },
        methods: {
            fAdd() {
                const testPassword = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,15}$/;
                if(testPassword.test(this.newpass)===false){
                    layer.msg('<span style="font-size:26px; line-height: 30px">新密码不符合规则</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.curpass.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请输入原密码</span>', {time: 2000, skin: 'fail'});
                    return
                }
                if (this.newpass.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请输入新密码</span>', {time: 2000, skin: 'fail'});
                    return
                }
                if (this.cofpass.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请输入确认密码</span>', {time: 2000, skin: 'fail'});
                    return
                }
                if (this.cofpass !== this.newpass) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">两次新密码不等</span>', {time: 2000, skin: 'fail'});
                    return
                }
                let self = this
                let ls_opid = "${sessionOpid}";
                let params = new URLSearchParams();
                params.append('CMD', "ZJ");
                params.append('VALUE01', ls_opid);
                params.append('VALUE02', this.curpass);
                params.append('VALUE03', this.newpass);
                axios.post('/f_wscl/com2', params)
                    .then(function (res) {
                        console.log(res.data);
                        let {db1} = res.data
                        if (db1[0].VALUE01 === 'ZZ01') {
                            layer.msg('<span style="font-size:24px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                        } else if (db1[0].VALUE01 === 'ZZ00') {
                            layer.msg('<span style="font-size:24px; line-height: 30px">密码修改完毕!</span>', {time: 2000, skin: 'succeed'}, function () {
                                self.curpass='';
                                self.newpass='';
                                self.cofpass='';
                            });
                        }
                    })
                    .catch(function (error) {
                        layer.msg('<span style="font-size:24px; line-height: 30px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                    });
            }
        }
    });

</script>
</body>
</html>
